<template>
    <div class="login">
        <van-nav-bar title="京东登录" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <!-- 修改name属性 -->
                <van-field v-model="loginname" name="loginname" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
        <van-cell-group title="去注册" @click="$router.push('/register/step1')">
            <van-cell title="快速注册" is-link />
        </van-cell-group>
    </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
// 引入创建路由对象的方法
import { useRouter } from 'vue-router';
// 引入登录接口
import { loginapi } from '@/api/loginapi';
// 引入函数形式的组件
import { Dialog } from 'vant';
// 引入userStore，调用数据和方法
import {useUserStore} from '@/stores/userStore'
// 定义表单数据
const loginname = ref('')
const password = ref('')
// 创建路由对象
const router=useRouter()
// userStore就是获取到的store仓库实例对象，相当于vuex中的this.$store
const userStore=useUserStore()
// console.log('userStore',userStore);
// 点击提交按钮  -- values组件中的
const onSubmit = (values: { loginname: string, password: string }) => {
    console.log(values);
    // 调用登录接口
    loginapi(values).then((res: any) => {
        console.log('登录接口', res);
        if (res.code == 200) {
            // 登录成功跳转到首页
            router.push('/home')
            // 将用户信息存到 pinia 中
            userStore.setUserId(res.data?.userid)
            // 设置处于登录状态
            userStore.islogined=true
        } else if (res.code == 10010) {
            // 用户未注册
            Dialog.confirm({
                title: '该用户不存在，立即去注册？',
            }).then(() => {
                // on confirm
                // 跳转到注册第一步页面
                router.push('/register/step1')
            })
        }
    })
}
console.log('登录页');

</script>
<style scoped>
.login {
    background-color: #f6f6f6;
    height: 100%;
}

.van-form {
    margin-top: 25px;
}
</style>
